<template>
    <div class="mainContent">
        <div class="banner">
            <el-carousel :interval="4000" type="card" height="350px">
                <el-carousel-item
                    v-for="item in banners"
                    :key="item.imageUrl"
                    class="banners-box"
                >
                    <img :src="item.imageUrl" alt="" />
                </el-carousel-item>
            </el-carousel>
        </div>
        <div class="mainContent-w">
            <div class="random-box">
                <ul>
                    <li>
                        <img
                            src="../../assets/images/yiqutongting.png"
                            alt=""
                        />
                    </li>
                    <li>
                        <img src="../../assets/images/youlike.png" alt="" />
                    </li>
                    <li>
                        <img
                            src="../../assets/images/randomlisten.png"
                            alt=""
                        />
                    </li>
                    <li>
                        <img src="../../assets/images/allListen.png" alt="" />
                    </li>
                </ul>
            </div>

            <!-- 歌单推荐 -->
        </div>
        <div class="playlistRecommended-father">
            <div class="playlistRecommended w">
                <div class="playlistRecommended-title"></div>
                <div class="recommended-box">
                    <div class="wrapper-left">
                        <div class="back-blur">
                            <div class="blur"></div>
                            <div class="wrapper-img">
                                <img
                                    src="../../assets/images/200618151935142_500x500_7541.jpg"
                                    alt=""
                                />
                            </div>
                        </div>
                    </div>
                    <div class="wrapper-right">
                        <div
                            class="playlistItem"
                            v-for="item in personalizedList"
                            :data-id="item.id"
                            @click="playListJumpDetails(item.id)"
                        >
                            <div class="info-img">
                                <img
                                    src="../../assets/images/lazyLoading11.gif"
                                    :data-img="item.picUrl"
                                    ref="imgs"
                                />

                                <div class="play-number">
                                    <i class="fa fa-headphones"></i>
                                    <span>{{ huansuan(item.playCount) }}</span>
                                </div>
                                <div class="hidden-play">
                                    <img
                                        src="../../assets/images/btn-play.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="info-text">
                                <p>{{ item.name }}</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新歌速递 -->
        <div class="newSongModle">
            <div class="newSongPush-top">
                <ul>
                    <li
                        @click="myChangeNewSongPushType('0')"
                        :class="newSongPushType == '0' ? 'type-color' : ''"
                    >
                        全部
                    </li>
                    <li
                        @click="myChangeNewSongPushType('7')"
                        :class="newSongPushType == '7' ? 'type-color' : ''"
                    >
                        华语
                    </li>
                    <li
                        @click="myChangeNewSongPushType('96')"
                        :class="newSongPushType == '96' ? 'type-color' : ''"
                    >
                        欧美
                    </li>
                    <li
                        @click="myChangeNewSongPushType('8')"
                        :class="newSongPushType == '8' ? 'type-color' : ''"
                    >
                        日本
                    </li>
                    <li
                        @click="myChangeNewSongPushType('16')"
                        :class="newSongPushType == '16' ? 'type-color' : ''"
                    >
                        韩国
                    </li>
                </ul>
            </div>
            <div class="newSongPush">
                <div class="newSongPush-Box">
                    <div class="newSong-left">
                        <div class="newSong-img">
                            <img
                                v-for="item in newSongPushList"
                                :src="item.album.blurPicUrl"
                                alt=""
                            />
                        </div>
                        <div class="playAllMusic">
                            <span>全部播放</span>
                        </div>
                    </div>
                    <div class="newSong-right">
                        <div
                            class="newSong-item"
                            v-for="item in newSongPushList"
                        >
                            <div
                                class="newSong-item-img"
                                @click="myGetSongUrl(item)"
                            >
                                <img
                                    src="../../assets/images/lazyLoading1.gif"
                                    ref="imgs"
                                    :data-img="item.album.blurPicUrl"
                                />
                                <div class="hidden-play">
                                    <img
                                        src="../../assets/images/btn-play.png"
                                        alt=""
                                    />
                                </div>
                            </div>
                            <div class="newSong-itme-content">
                                <div class="info-left">
                                    <p>{{ item.album.name }}</p>
                                    <span v-for="elem in item.album.artists">
                                        {{ elem.name }}
                                    </span>
                                </div>
                                <div class="info-time">
                                    <span>{{ formatTime(item.duration) }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 新专辑上架 -->
        <div class="getNewAlbums">
            <div class="getNewAlbums-title w"></div>
            <div class="albums-container">
                <div class="albums-item" v-for="item in newAlbums">
                    <div class="img-box">
                        <img
                            src="../../assets/images/lazyLoading11.gif"
                            alt=""
                            :data-img="item.blurPicUrl"
                            ref="imgs"
                        />
                        <div class="hidden-play">
                            <img
                                src="../../assets/images/btn-play.png"
                                alt=""
                            />
                        </div>
                    </div>
                    <div class="item-content">
                        <p>{{ item.name }}</p>
                        <span>{{ item.artist.name }}</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- MV轮播 -->
        <div class="getMv">
            <div class="mvTitle w"></div>
            <div class="mvContainer w">
                <div class="changMvtype">
                    <ul>
                        <li
                            @click="myChangeMvType('全部')"
                            :class="mvType == '全部' ? 'type-color' : ''"
                        >
                            全部
                        </li>
                        <li
                            @click="myChangeMvType('内地')"
                            :class="mvType == '内地' ? 'type-color' : ''"
                        >
                            内地
                        </li>
                        <li
                            @click="myChangeMvType('港台')"
                            :class="mvType == '港台' ? 'type-color' : ''"
                        >
                            港台
                        </li>
                        <li
                            @click="myChangeMvType('欧美')"
                            :class="mvType == '欧美' ? 'type-color' : ''"
                        >
                            欧美
                        </li>
                        <li
                            @click="myChangeMvType('日本')"
                            :class="mvType == '日本' ? 'type-color' : ''"
                        >
                            日本
                        </li>
                        <li
                            @click="myChangeMvType('韩国')"
                            :class="mvType == '韩国' ? 'type-color' : ''"
                        >
                            韩国
                        </li>
                    </ul>
                </div>
                <div class="mv-box">
                    <el-carousel
                        trigger="click"
                        height="500px"
                        :interval="7000"
                    >
                        <el-carousel-item v-for="item in 3" :key="item">
                            <div class="mv-info-box">
                                <div
                                    class="mvItem"
                                    v-for="elem in mvList.slice(
                                        (item - 1) * 10,
                                        item * 10
                                    )"
                                >
                                    <div class="mvImg">
                                        <img
                                            src="../../assets/images/lazyLoading11.gif"
                                            :data-img="elem.cover"
                                            ref="imgs"
                                            alt=""
                                        />
                                        <div class="hidden-play">
                                            <img
                                                src="../../assets/images/btn-play.png"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                    <div class="mvContent">
                                        <p>{{ elem.name }}</p>
                                        <span>{{ elem.artistName }}</span>
                                    </div>
                                </div>
                            </div>
                        </el-carousel-item>
                    </el-carousel>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import { formatTime, huansuan, lazyload, debounce } from "../../utils/common";
import "../../utils/font-awesome-4.7.0/css/font-awesome.min.css";
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("home");
export default {
    computed: {
        ...mapState([
            "banners",
            "personalizedList",
            "newSongPushList",
            "newSongPushType",
            "newAlbums",
            "mvList",
            "mvType",
        ]),
    },
    created() {
        this.huansuan = huansuan;
        this.formatTime = formatTime;
        //用于记录用户的滚动方向，用户一滚动，就把滚动后得到的值赋给这个值
        //等于是一个单向锁，防止用户向上滚动的时候也会触发事件
        this.prevIndexY = 0;
        //给window绑定滚轮事件,并绑定防抖函数，防止多次发送ajax请求。
        this.getBanner();
        this.getPersonalized();
        this.getNewSongPush();
        this.getNewAlbums();
        this.getMvAll();
        // lazyload(this.$refs.imgs);
    },
    updated() {
        window.addEventListener("scroll", debounce(this.jiazai, 1000), false);
        setTimeout(() => {
            lazyload(this.$refs.imgs);
        }, 500);
    },
    beforeDestroy() {
        window.removeEventListener("scroll", this.jiazai);
    },
    methods: {
        ...mapMutations([
            "changeNewSongPushType",
            "changeMvType",
            "changeCurrentMusicName",
        ]),
        ...mapActions([
            "getBanner",
            "getPersonalized",
            "getNewSongPush",
            "getNewAlbums",
            "getMvAll",
            "getSongUrl",
        ]),

        //改变新歌类型状态
        myChangeNewSongPushType(val) {
            this.changeNewSongPushType(val);
            this.getNewSongPush();
        },
        myChangeMvType(val) {
            this.changeMvType(val);
            this.getMvAll();
        },
        //跳转到歌单详情页
        playListJumpDetails(val) {
            this.$router.push("/home/playlist-details/" + val);
        },
        myGetSongUrl(val) {
            this.getSongUrl(val.id);
            this.changeCurrentMusicName(val);
        },
        jiazai() {
            // console.log(this.$refs.imgs);
            if (window.scrollY > this.prevIndexY) {
                console.log("防抖~~~~~~~~~");
                this.prevIndexY = window.scrollY;
                lazyload(this.$refs.imgs);
            }
        },
    },
};
</script>

<style lang='scss' scoped>
@import "../../assets/sass/home.scss";
</style>